<template>
  <div id="webinfo">
    <div class="shadow-img slide-bck-bottom">
      <p class="nowrap"><span class="yellow">Resume Of</span>Jin Xin</p>
    </div>
    <div class="description slide-bck-top">
      <Row class="tab" type="flex" justify="center">
        <li
          v-for="(item, index) in tags"
          :key="index"
          @click="counter = index"
          :class="{
            active: counter === index,
            bk1: index === 0,
            bk2: index === 1,
            bk3: index === 2,
          }"
        >
          {{ item }}
        </li>
      </Row>
      <div class="skills content" v-show="counter === 0">
        <p>MY SKILLS</p>
        <Row type="flex" justify="start" class="pitem">
          <Col span="8" class="itemsk">HTML</Col>
          <Col span="16"
            ><Progress
              :percent="88"
              status="active"
              stroke-width="25"
              hide-info
          /></Col>
        </Row>
        <Row type="flex" justify="start" class="pitem">
          <Col span="8" class="itemsk">CSS</Col>
          <Col span="16"
            ><Progress
              :percent="92"
              status="active"
              stroke-width="25"
              hide-info
          /></Col>
        </Row>
        <Row type="flex" justify="start" class="pitem">
          <Col span="8" class="itemsk">JAVASCRIPT</Col>
          <Col span="16"
            ><Progress
              :percent="91"
              status="active"
              stroke-width="25"
              hide-info
          /></Col>
        </Row>
        <p class="other-skills">OTHER SKILLS</p>
        <Row>
          <Col span="8">
            <div class="cic">
              <i-circle
                :percent="80"
                size="47px"
                stroke-color="rgb(244, 208, 63)"
              >
                <span class="demo-Circle-inner">95%</span>
              </i-circle>
            </div>
            <p class="skill-name nowrap">jQuery</p></Col
          >
          <Col span="8">
            <div class="cic">
              <i-circle
                :percent="80"
                size="47px"
                stroke-color="rgb(244, 208, 63)"
              >
                <span class="demo-Circle-inner">82%</span>
              </i-circle>
            </div>
            <p class="skill-name nowrap">React</p></Col
          >
          <Col span="8">
            <div class="cic">
              <i-circle
                :percent="80"
                size="47px"
                stroke-color="rgb(244, 208, 63)"
              >
                <span class="demo-Circle-inner">88%</span>
              </i-circle>
            </div>
            <p class="skill-name nowrap">Vue</p></Col
          >
        </Row>
      </div>
      <div class="eductions content" v-show="counter === 1">
        <p>EDUCATIONS</p>
        <Menu active-name="1-2"  accordion width="100%">
          <Submenu name="1" class="down-item">
            <template slot="title"> MSc in Computer Sciene </template>
            <MenuItem name="1-1"
              ><h5 class="title">
                Consectetur adipiscing
                <span class="list-year">(2014 - 2005)</span>
              </h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit
                Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.
                Vivamus sit
              </p></MenuItem
            >
          </Submenu>
          <Submenu name="2" class="down-item">
            <template slot="title"> Grad At Computer Engineering </template>
            <MenuItem name="2-1"><h5 class="title">
                Consectetur adipiscing
                <span class="list-year">(2014 - 2005)</span>
              </h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit
                Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.
                Vivamus sit
              </p></MenuItem>
          </Submenu>
          <Submenu name="3" class="down-item">
            <template slot="title"> College </template>
            <MenuItem name="3-1"><h5 class="title">
                Consectetur adipiscing
                <span class="list-year">(2014 - 2005)</span>
              </h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit
                Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.
                Vivamus sit
              </p></MenuItem>
          </Submenu>
          <Submenu name="4" class="down-item">
            <template slot="title"> Schools </template>
            <MenuItem name="4-1"><h5 class="title">
                Consectetur adipiscing
                <span class="list-year">(2014 - 2005)</span>
              </h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit
                Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.
                Vivamus sit
              </p></MenuItem>
          </Submenu>
        </Menu>
      </div>
      <div class="employment content" v-show="counter === 2">
        <p>EMPLOYMENT</p>
         <Card  class="card-item" v-for="n in 4">
        <p slot="title" class="my-tltle">

            Classic film
        </p>
        <p href="#" slot="extra">
            <Icon type="ios-loop-strong"></Icon>
            2014-2015
        </p>
        <p>Consectetur adipiscing</p>
        <p class="contents">Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.</p>
    </Card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "webinfo",
  data() {
    return {
      tags: ["Skills", "Education", "Employment"],
      counter: 0,
    };
  },
};
</script>

<style  scoped>
.shadow-img {
  width: 100%;
  margin: 0 auto;
  height: 130px;
  background-color: #111111;
  border-radius: 5px;
  font-size: 25px;
  color: #ffffff;
  position: relative;
}
.shadow-img p {
  position: absolute;
  bottom: 20px;
}
.shadow-img p span.yellow {
  color: #f4d03f;
  margin-right: 10px;
  margin-left: 10px;
}
.description .tab li.bk1 {
  background-image: url("../assets/icon_01.png");
}
.description .tab li.bk2 {
  background-image: url("../assets/icon_02.png");
}
.description .tab li.bk3 {
  background-image: url("../assets/icon_03.png");
}
.slide-bck-bottom {
  animation: slide-bck-bottom 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.slide-bck-top {
  animation: slide-bck-top 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.description {
  width: 100%;
  background-color: #ffffff;

  border-radius: 5px;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
  margin-bottom: 20px;
}

.description .tab li {
  background-repeat: no-repeat;
  width: 33.3%;
  border-right: 3px solid #ffffff;
  margin: 0px;
  padding: 24px 0px 19px;
  text-align: center;
  background-color: #111111;
  color: #f4d03f;
  transition: background-color 0.3s ease-in;
  -webkit-transition: background-color 0.3s ease-in;
  font-size: 16px;
}
.description .tab li:last-child {
  border-right: none;
}

.description .tab li.active {
  background-color: #f4d03f;
  color: #111111;
}

.description .content {
  padding: 15px 30px;
}
.description .skills > p {
  font-size: 21px;
  margin-bottom: 20px;
}
.description .skills .itemsk {
  display: flex;
  align-items: center;
}
.description .skills .pitem {
  margin-bottom: 5px;
}
.description .skills .other-skills {
  margin-top: 20px;
}
.description .skills .skill-name {
  text-align: center;
}
.cic {
  width: 67.5px;
  margin: 0 auto;
}
.ivu-chart-circle {
  width: 67.5px;
  margin: 0 auto;
  text-align: center;
}
.description .eductions > p {
  font-size: 21px;
  margin-bottom: 20px;
  font-weight: 400;
}
.description .employment > p {
  font-size: 21px;
  margin-bottom: 20px;
  font-weight: 400;
}
.down-item{
    margin-bottom: 10px;
}
.card-item{
  width: 100%;
  background: #111111;
  color: #f4d03f;
  margin-bottom: 10px;
}
.my-tltle{
  color: #ffffff;
}
.description .employment .contents{
  color: #ffffff;
}
h5.title{
    color: #000;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}
h5.title .list-year{
    margin-left: 5px;
}
/* .description .skills .c-progress{
    width: 100%;
    height: 80px;
} */
@keyframes slide-bck-bottom {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(-200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}
@keyframes slide-bck-top {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}
</style>
<style >
.description .eductions .ivu-menu-submenu-title {
  background-color: #111111;
  color: #f4d03f;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.description .eductions .ivu-menu-opened > .ivu-menu-submenu-title {
  background-color: #f4d03f;
  color: #111111;
}
.description .eductions .ivu-menu-item{
    padding-left: 10px !important;
}
.description .employment .ivu-card-head {
  border-bottom: none;
}
</style>